theme-color = #e6e7ee
// theme-color = #212536
// theme-color = #252728

font-color = #323E70
// font-color = #fff

icon-color = #323E70
// icon-color = #0072EF

box-color1 = #b8b9be
box-color2 = #fff
// box-color1 = #1f2122
// box-color2 = #2b2d2e

.inner
  overflow-x: hidden

.btn
    display: flex;
    align-items: center;
    background: theme-color;
    color: font-color;
    box-shadow:  6px 6px 12px box-color1,-6px -6px 12px box-color2;
    &.on
      box-shadow:  inset 2px 2px 5px box-color1,inset -3px -3px 7px box-color2;

.header
  text-align center
  color #fff
  display flex
  align-items center
  background: theme-color;
  box-shadow:  6px 6px 12px box-color1,-6px -6px 12px box-color2;
  .btn
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-right: 30px;
    border-radius: 10px;
  .caidan
    margin-left 30px
  .title
    width 60%
    display: flex;
    margin-left: auto;
    position relative;
    .options
      position: absolute;
      left: -20px;
      top: 70px;
      font-size: 26px;
      padding: 12px;
      z-index: 2;
      border-radius: 10px;
      background: theme-color;
      box-shadow:  6px 6px 12px box-color1,-6px -6px 12px box-color2;
      display: none;
      &.on
        display: block;
      .option
        padding: 10px 20px;
        &.on
          box-shadow:  inset 2px 2px 5px box-color1,inset -3px -3px 7px box-color2;

.inner
  width 1500px;
  background: theme-color;
  display flex
  transition transform .2s linear


.topics
  width: 750px
  overflow-y: auto
  .btn
    padding: 10px 20px;
    text
      margin-left: 10px
  .pubs
    width: 100%;
    max-height: 200px;
    white-space: nowrap;
    margin-top: 20px;
    padding-bottom: 20px;
  .topic
    width 180px
    display inline-block
    font-size 20px
    .box
      display: flex;
      flex-direction: column
      align-items: center
      justify-content: center
    image
      width 100px
      height 100px
    text
      margin-top 8px
      text-align center
      display inline-block
      max-height 60px
      overflow: hidden
      color: #a9abb3
  .tags
    width: 94%;
    white-space: nowrap;
    margin: 20px auto 0;
    .tag
      display: inline-flex;
      margin-left: 20px;
      height: 100px;
      line-height: 100px;
      color: #a9abb3;
  .search-tag
    width 100%
    color #a9abb3
    padding 30px
    box-sizing border-box
    height auto
    overflow: hidden
    flex-wrap wrap
    .search-tag-box
      padding 20px
      // width: 600px
      border-radius 12px
      overflow hidden
      background: theme-color;
      box-shadow:  6px 6px 12px box-color1,-6px -6px 12px box-color2;
      .search-input
        display flex
        width: 100%;
        align-items: center;
        justify-content: center;
      input
        width 70%
        height: 60px;
        line-height: 60px;
        border 2px solid #fff
        border-radius 12px
        font-size 28px
        padding-left 20px
        text-align: left
        color: #000
        margin: 0 20px;
    text
      display inline-block
      color #a9abb3
      margin 20px
  .fav-posts
    width: 92%;
    margin: 0 auto;
    padding-bottom: 50px;
    .btn
      margin-top: 10px;
      border: 1px solid #fff;
      font-size: 24px;
      border-radius: 10px;

.posts
  display flex
  flex-direction: column
  width: 750px
  .btn
      width: 60px;
      height: 60px;
      justify-content: center;
      border-radius: 10px;
  .the-topic
    display flex
    flex-direction: column
    align-items: center
    padding 20px 0
    width: 92%;
    margin: 10px auto;
    box-sizing: border-box;
    box-shadow:  6px 6px 12px box-color1,-6px -6px 12px box-color2;
    image
      width 100px
      height 100px
      border-radius: 50%
    text
      margin 8px 20px
      text-align center
  .the-tag
    display:flex;
    justify-content: center;
    align-items: center;
    padding 20px
    font-size: 50px;
    margin: 10px auto;
    box-shadow:  6px 6px 12px box-color1,-6px -6px 12px box-color2;
    text
      margin:0 20px;

